<template>
	<Search @search="query" @reset="query"></Search>
	<a-card>
	  <div class="table-operations">
		<a-button v-permission="['role:delete']" type="primary" @click="addUploaderModal">上传</a-button>
		<a-button v-permission="['role:delete']" danger>删除</a-button>
	  </div>
	  <a-table :columns="columns" size='small' :data-source="data" rowKey="id"
		:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
		
		:pagination='false'>
		<template #bodyCell="{ column, record }">
			<template v-if="column.key === 'fileSize'">
  
			</template>
		  <template v-if="column.key === 'createTime'"> 
			{{ $formatDate(record.createTime) }}
		  </template>
  
		  <template v-if="column.key === 'action'">
			<div>
				<WsAuthority permissions="role:delete">
				   <a-button type="link" danger @click="previewModal(record.id)">预览</a-button>		
				  <!-- <a-button type="link" danger @click="() => setVisible(true)">预览</a-button> -->
				  <!-- 	 -->
			  </WsAuthority>

			  <WsAuthority permissions="role:delete">
				   <!-- 修改下载按钮点击事件 -->
				   <a-button type="link" danger @click="downloadFileHandler(record)">下载</a-button>		
				 
			  </WsAuthority>
			  <WsAuthority permissions="role:delete">
				<a-popconfirm title="请确定是否删除这条数据?" ok-text="确定" cancel-text="取消" @confirm="deleteRoleBt(record.id)">
				  <a-button type="link" danger>删除</a-button>
				</a-popconfirm>
			  </WsAuthority>
		
			</div>
  
		  </template>
		</template>
	  </a-table>
	  <a-pagination :show-total="count => `共 ${count} 条`" v-model:current="current" v-model:pageSize="size" :total="count"
		@change="changePage" />
	</a-card>
	<uploader ref="uploadRef" @refresh="refresh" />
	<Preview  ref="previewRef"></Preview>
	<a-image
      :width="200"
      :style="{ display: 'none' }"
      :preview="{
        visible,
        onVisibleChange: setVisible,
      }"
      :src="previewUrl"
    />

</template>
<script setup>
import Search from './component/search.vue'
import uploader from './component/uploader.vue'
import Preview from './component/Preview.vue'

import { columns,fileExtensionMapper } from '.'
import { pageN,preview } from '@/api/file'; // 导入下载接口

//数据
const data = ref([])
//总数
const count = ref(0);
//当前页码
const current = ref(1);
//当前页条数
const size = ref(10)
//上传弹框
const uploadRef = ref()
//预览弹框
const previewRef = ref()
//如果是图片或者视频
const previewUrl= ref("");
const selectedRowKeys = ref([]); 
const visible = ref(false);
const onSelectChange = keys => {
  console.log('selectedRowKeys changed: ', keys);
  selectedRowKeys.value = keys;
};

onMounted( () => {
	pageList({})
})
const setVisible = (value) => {
  visible.value = value;
};
//获取数据
const pageList = (params) => {
	params.current = current.value;
	params.pageSize = size.value;
	pageN(params).then(res => {
		const { total, records } = res.data;
		data.value = records
		count.value = total;
	})
}

const refresh = () => {
	current.value = 1;
	pageList({})
}
//改变页码
const changePage = (page, pageSize) => {
	current.value = page;
	pageList({})
};

//查询与重置
const query = data => {
	pageList(data)
}

//打开弹框
const addUploaderModal = () => {
	uploadRef.value.openModal()
}

const previewModal=(id)=>{
	preview(id).then(res=>{
		const rsData = res.data;
	    const fileType= fileExtensionMapper[rsData.fileExtension];
	
		if(fileType<3){
			previewUrl.value = rsData.previewUrl;
		 	visible.value = true;
		}else{
			rsData.fileType = fileType;
			previewRef.value.openModal(rsData)
		}	
	})
	
}
//删除文件
const deleteRoleBt = id => {

}

// 新增下载方法
const downloadFileHandler = (item) => {
    downloadFile(item.id).then((res) => {
        const url = window.URL.createObjectURL(new Blob([res.data]));
        const link = document.createElement('a');
        link.href = url;
        // 从响应头中获取文件名
        link.setAttribute('download', item.fileName); 
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }).catch((err) => {
        console.error('下载失败:', err);
        // 给用户一个友好的提示
        alert('文件下载失败，请稍后重试。');
    });
};
</script>

<style scoped></style>